<x-filament-panels::page>
    <x-resources.list-header title="分配权限" description="给当前角色分配权限" :is_margin="false"></x-resources.list-header>
    <div
        x-data="permissionManager()"
        class="bg-white dark:bg-gray-950 rounded-xl ring-1 mine-header px-4 py-4 space-y-4"
    >
        <div class="text-sm">
            <span class="text-gray-700 dark:text-gray-200">角色：</span><span>{{ $record->title }}({{ $record->name }})</span>
        </div>
        @foreach($permissions as $permission)
            <div class="flex items-center">
                <label class="flex items-center">
                    <x-filament::input.checkbox
                        wire:key="permission-{{ $permission->id }}"
                        value="{{ $permission->id }}"
                        x-model="selectedPermissions"
                        :value="$permission->id"
                        @change="toggleChildren({{ $permission->id }}, $event.target.checked)"
                    />
                    <span class="pl-2 text-sm">{{ $permission->title  }}</span>
                </label>
            </div>
            @if($permission->children && $permission->children->isNotEmpty())
                <div class="children-container-{{ $permission->id }} space-y-2">
                    @foreach($permission->children as $child)
                        <label class="flex items-center pl-6">
                            <x-filament::input.checkbox
                                    wire:key="permission-{{ $permission->id }}-child-{{ $child->id }}"
                                    value="{{ $child->id }}"
                                    x-model="selectedPermissions"
                                    :value="$child->id"
                                    @change="toggleChildren({{ $child->id }}, $event.target.checked)"
                            />
                            <span class="pl-2 text-sm">{{ $child->title  }}</span></label>
                        @if($child->children)
                            <div class="children-container-{{ $child->id }} pl-14 flex flex-row items-center  gap-4 " >
                                @foreach($child->children as $grandChild)
                                    <label class="flex items-center">
                                        <x-filament::input.checkbox
                                                wire:key="permission-{{ $permission->id }}-child-{{ $child->id }}-grandchild-{{ $grandChild->id }}"
                                                value="{{ $grandChild->id }}"
                                                x-model="selectedPermissions"
                                                :value="$grandChild->id"
                                        />
                                        <span class="pl-2 text-sm">{{ $grandChild->title  }}</span>
                                    </label>
                                @endforeach
                            </div>
                        @endif
                    @endforeach
                </div>
            @endif
        @endforeach

        <div class="flex space-x-4 mt-10">
            <x-filament::button
                    x-on:click="savePermissions"
                    color="primary"
            >
                <span x-show="!isSaving">保存权限</span>
                <span x-show="isSaving">保存中...</span>
            </x-filament::button>
            <x-filament::button x-on:click="onBack" color="gray">返回</x-filament::button>
        </div>
    </div>
</x-filament-panels::page>

@assets
<script>
    function permissionManager() {
        return {
            isSaving: false,
            selectedPermissions: @json($selectedPermissions),

            toggleChildren(parentId, isChecked) {
                // 获取所有子权限的复选框
                const childrenContainer = document.querySelector(`.children-container-${parentId}`);
                if (childrenContainer) {
                    const childCheckboxes = childrenContainer.querySelectorAll('input[type="checkbox"]');
                    childCheckboxes.forEach(checkbox => {
                        checkbox.checked = isChecked;
                        // 更新 Alpine.js 数据模型
                        const value = parseInt(checkbox.value);
                        if (isChecked && !this.selectedPermissions.includes(value)) {
                            this.selectedPermissions.push(value);
                        } else if (!isChecked) {
                            const index = this.selectedPermissions.indexOf(value);
                            if (index > -1) {
                                this.selectedPermissions.splice(index, 1);
                            }
                        }
                    });
                }
            },

            savePermissions() {
                this.isSaving = true
                // 调用 Livewire 方法保存权限
                @this.call('savePermissions', this.selectedPermissions).then(() => {
                    this.isSaving = false;

                    window.history.back();
                })
            },

            onBack() {
                window.history.back();
            }
        }
    }
</script>
@endassets
